<template>
  <el-form
    ref="formRef"
    :model="formData"
    label-width="140px"
    class="control-form"
  >
    <el-form-item label="出差管控方式" prop="controlMode">
      <el-radio-group v-model="formData.controlMode">
        <el-radio label="pre">差前审批</el-radio>
        <el-radio label="post">差后审批</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="出差单管控内容">
      <el-checkbox-group v-model="formData.controlItems">
        <el-checkbox label="location">地点</el-checkbox>
        <el-checkbox label="time">时间</el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <el-form-item label="代订权限配置" prop="bookingAuth">
      <el-radio-group v-model="formData.bookingAuth">
        <el-radio label="company">本公司</el-radio>
        <el-radio label="department">本部门</el-radio>
        <el-radio label="self">本人</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="差旅政策配置">
      <el-checkbox
        v-model="formData.allowMultiPolicies"
        label="允许配置多个差旅政策"
      />
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive, onMounted, defineProps } from "vue";

// 接收父组件参数（当前标签页标识和默认配置）
const props = defineProps({
  isEdit: { type: Boolean, default: false },
  tabKey: { type: String, required: true }, // 当前标签页（flight/hotel等）
  controlConfig: { type: Object, required: true }, // 当前标签页的默认配置
});

// 表单引用
const formRef = ref(null);

// 表单数据（初始化时使用当前标签页的默认配置）
const formData = reactive({
  controlMode: props.controlConfig.controlMode || "",
  controlItems: props.controlConfig.controlItems || [],
  bookingAuth: props.controlConfig.bookingAuth || "",
  allowMultiPolicies: props.controlConfig.allowMultiPolicies || false,
});

// 组件挂载时初始化（仅初始化一次，后续由keep-alive缓存）
onMounted(() => {
  console.log(
    `【${props.tabKey}】管控组件初始化，默认方式：${formData.controlMode}`
  );
});
</script>

<style scoped>
.control-form {
  margin-top: 20px;
}
.el-form-item {
  margin-bottom: 18px;
}
.el-radio {
  margin-right: 20px;
}
</style>
